import React, { Component } from 'react';
import { getFilmInfo } from './api/index'
import DetailWarp from './components/DetailWarp';
import DetailActors from './components/DetailActors';
import Photos from './components/Photos';
import {BuyBut} from './styled'
class FilmDetail extends Component {
  state = {
    filmInfo:[]
  }
  componentDidMount() {
    let id = this.props.match.params.id;
    getFilmInfo({filmId:id}).then(res => {
      this.setState({
        filmInfo:res.data.film
      })
    })
  }
  render() {
    let {filmInfo} =  this.state ;
    return (
      <div className="film">
        <div className='header'></div>
        <div className='detail-img' style={{position:'relative'}}>
          <div style={{height:'56vw'}}></div>
          <div style={{width:'100%',overflow:'hidden',position:'absolute',top:'0',height:'56vw'}}>
            <img src={filmInfo.poster} alt="" style={{position:'absolute',top:'50%',width:'100vw',transform:'translateY(-50%)'}}/>
          </div>
        </div>
        <DetailWarp data={filmInfo} />
        <DetailActors data={filmInfo} />
        <Photos photos={filmInfo.photos} />
        <div style={{ width: '100%', height: '1px' }}></div>
        <BuyBut>购票</BuyBut>
      </div>
    );
  }
}

export default FilmDetail;